<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>修改角色</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/comments.css" media="all">
    <style>
        .layui-form-label{
            width: 110px;
        }
    </style>
</head>
<body>
    <div class="maincontainer">
        <blockquote class="layui-elem-quote">
            修改后台角色
            <button type="button" class="layui-btn layui-btn-sm" style="float: right;margin-top: -4px;" onclick="window.history.back();">返回</button>
        </blockquote>
        <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item">
              <label class="layui-form-label">角色名称：</label>
              <div class="layui-input-inline">
                <input type="text" name="roleName" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态：</label>
                <div class="layui-input-block">
                    <input type="radio" name="openStatus" value="1" title="启用" checked="">
                    <input type="radio" name="openStatus" value="0" title="禁用">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色权限：</label>
                <div class="layui-input-inline">
                    <div id="selectRole" class="demo-tree"></div>
                </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="button" class="layui-btn sure">确认</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">取消</button>
              </div>
            </div>
        </form>
    </div>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>

    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'form', 'tree'], function() {
        var http = layui.http,
            form = layui.form,
            tree = layui.tree;

        var id = http.getPid('id')
        roleAllList = [];
        //所有菜单权限
        http.get('food/manager/role/listAllAuth',{},function(res){
        	//开启菜单权限
			roleAllList = res.data;
        	tree.render({
        	  elem: '#selectRole'
        	  ,data: res.data
        	  ,id: 'demoId'  //定义索引
        	  ,showCheckbox: true
        	}); 
        	getInfo();
        })
        
        //查询回显
        var infoRoleList = [];  //回显已选权限
        function getInfo(){
        	http.get('food/manager/role/findById',{id:id},function(res){
        		 var data = res.data;
        		 $('input[name=roleName]').val(data.roleName);
        		if(data.openStatus == 0)
        			$('input[name=openStatus]').eq(1).attr('checked',true)
        		if(data.openStatus == 1)
        			$('input[name=openStatus]').eq(0).attr('checked',true)
        		if(data.authIdList){
        			get_infolist(data.authIdList);	
        			tree.setChecked('demoId', infoRoleList);
        		}
        		form.render();
        	})
        }
        
        
        // 确定
        var authIdList = [];  //已选权限
        $(".sure").click(function () {
        	authIdList = [];
        	var roleName = $('input[name=roleName]').val();
        	if ($.trim(roleName) == "") {
        		layer.msg('角色名不能为空')
        		$("input[name='roleName']").focus();
        		return false;
        	}
        	var openStatus = $('input[name=openStatus]:checked').val();
        	var checkData = tree.getChecked('demoId');//获得选中的权限
        	get_list(checkData);
			
			if(authIdList.length==0){
				layer.msg('请勾选角色权限')
				return false;
			}
        	var data = {
        		id:id,
        		roleName: roleName,
        		openStatus: openStatus,
        		authIdList:authIdList
        	}
        	http.postJSON('food/manager/role/update', JSON.stringify(data),function(res){
        		if(res.code == 200){
        			layer.msg('操作成功')
        			setTimeout(function(){
        			    window.history.back()
        			},500)
        		}else{
        			layer.msg(res.msg)
        		}
        	})
        })
        
        //获取权限id
        function get_list(checkData){
        	for(var i=0;i<checkData.length;i++){
        		authIdList.push(checkData[i].id);
        		if(checkData[i].children && checkData[i].children.length>0){
        			get_list(checkData[i].children);
        		}
        	}
        }
        
        //回显权限id
		var roleId = '';
        function get_infolist(checkData){
        	for(var i=0;i<checkData.length;i++){
				roleId = checkData[i];
				nameTitle(roleAllList);
        	}
        }
		
		function nameTitle(checkData){
			for(var i=0;i<checkData.length;i++){
				if(checkData[i].children && checkData[i].children.length>0){
					nameTitle(checkData[i].children);
				}else{
					if(checkData[i].treeId == roleId){
						if(nameTitleName(checkData[i].title,checkData[i])){
							infoRoleList.push(roleId);
						}
					}
				}
			}
		}
		
		//验证父级名 只有最小子级能入tree回显 (因为有一个父级（员工管理）和下级同名，需要单独处理)
		function nameTitleName(name,checkData){
			var state = true;
			if(name=='员工管理'){
				if(!checkData.children || checkData.children.length==0){
					return state
				}
			}
			if(
				name == '个人中心' ||
				name == '数据管理' ||
				name == '员工管理' ||
				name == '财务管理' 
			){
				state = false
			}
			return state
		}
    })
</script>
</body>